<template>
   <el-container>
     <el-header>
       <goback :content="content"></goback>
     </el-header>
     <el-main>
      <div style="margin-bottom: 10px;">
       <el-button type="primary" @click="addNewZhiDu">新增制度</el-button>
      </div>
       <el-form ref="form" v-model="form" :inline="true">
         <el-form-item>
           <el-input v-model="form.header" placeholder="标题"></el-input>
         </el-form-item>
         <el-form-item>
           <el-input v-model="form.username" placeholder="创建人"></el-input>
         </el-form-item>
         <el-form-item><el-button type="primary">搜索</el-button></el-form-item>
       </el-form>
       <el-table
         :data="data"
       >
         <el-table-column prop="header" label="标题"></el-table-column>
         <el-table-column prop="username" label="创建人"></el-table-column>
         <el-table-column prop="create_at" label="创建时间"></el-table-column>
         <el-table-column label="操作">
           <template slot-scope="scope">
             <el-button size="mini" type="primary" @click="detail(scope.row)">详细</el-button>
             <el-button size="mini" type="danger" @click="delZhiDu(scope.row)">删除</el-button>
           </template>
         </el-table-column>

       </el-table>
     </el-main>
     <el-footer style="margin-top: 40px">
       <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="form.page"
         :page-sizes="[10, 20, 30, 40]"
         :page-size="form.page_size"
         layout="total, sizes, prev, pager, next, jumper"
         :total="total">
       </el-pagination>
     </el-footer>

     <!--    弹窗-->
     <el-dialog :title="title" :visible.sync="dialogFormVisible">
       <el-form :model="dialog">
         <el-form-item label="标题" :label-width="formLabelWidth">
           <el-input v-model="dialog.header" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="内容" :label-width="formLabelWidth">
           <el-input type="textarea" show-word-limit maxlength="1500" rows="5" v-model="dialog.content"></el-input>
         </el-form-item>

       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="cancleDialog">取 消</el-button>
         <el-button type="primary" @click="editZhiDu">确 定</el-button>
       </div>
     </el-dialog>

   </el-container>

</template>

<script>
  import goback from "../common/goback";
  import {zhiDuList,addZhiDu} from "../../apilist/ZhiDu";

  export default {
        name: "rules",
        data(){
            return {
                content: '规章制度',
                form: {
                    username: '',
                    page: 1,
                    page_size: 20,
                    header: '',
                },

                data:[],
                total: 0,
                dialogFormVisible: false,
                formLabelWidth: '80px',
                dialog: {
                    id: 0,
                    header: '',
                    content: '',
                },
                title: '新增制度',
            }
        },
        components: {goback},
        methods: {
            getList(){
                zhiDuList(this.form).then(res => {
                    this.data = res.data.data
                    this.total = res.data.total
                })
            },
            handleSizeChange(val){
                this.form.page_size = val
                this.getList(this.form)
            },
            handleCurrentChange(val){
                this.form.page= val
                this.getList(this.form)
            },
            cancleDialog(){
                this.dialog.header = ''
                this.dialog.content = ''
                this.title = '新增制度'
                this.dialogFormVisible = false
            },
            detail(row){
                this.title = row.header
                this.dialog.header = row.header
                this.dialog.content = row.content
                this.dialog.id = row.id
                this.dialogFormVisible = true
            },
            delZhiDu(row){
                console.log(row.id)
            },
            addNewZhiDu(){
                this.dialog.header = ''
                this.dialog.content = ''
                this.dialog.id = 0
                this.title = '新增制度'
                this.dialogFormVisible = true
            },
            editZhiDu(){
                addZhiDu(this.dialog).then(res => {
                    if(res.state == 'ok'){
                        this.$message({
                            type: 'success',
                            message: '添加成功',
                            onClose:()=>{
                                this.getList()
                                this.dialogFormVisible = false
                            }
                        })
                    }
                })
            }
        },
        mounted() {
            this.getList()
        }
    }
</script>

<style scoped>

</style>
